{/*

    ==element无限极子菜单封装,调用须在外面包el-menu标签==

*/}

<style>
    .el-menu-item{
        height: 50px;
    }
</style>

<script type="text/html" id="vue--menu-plus">

    <template v-for="(item, index) in items">
        <el-menu-item v-if="!item.children || item.children.length <= 0" @click="$emit('menu-select', item)" :index="item.index.toString()">
            <el-icon v-if="item.icon"><component :is="item.icon"></component></el-icon>
            <span>{{ item.title }}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="item.index.toString()">
            <template #title>
                <el-icon v-if="item.icon"><component :is="item.icon"></component></el-icon>
                <span>{{ item.title }}</span>
            </template>
            <menu-plus :items="item.children" @menu-select="(citem) => $emit('menu-select', citem)"></menu-plus>
        </el-sub-menu>
        <div v-if="item.index == spv" style="flex-grow:1" />
    </template>
</script>

<script>
    VueInit.components.MenuPlus = {
        template:document.getElementById('vue--menu-plus').innerHTML,
        props: {
            items: {
                required: true,
            },
            sp: {
                required: false
            }
        },
        emits: ['menu-select'],
        data(){
            return {
                spv: this.sp ? this.sp : ''
            }
        }
    };
</script>